<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
        div {
            display: grid;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);;
        }

        .container-1 {
            display: grid;
            grid-template-columns: repeat(2, 100px 20px 80px);
        }

        .container-2 {
            display: grid;
            grid-template-columns: repeat(auto-fill, 100px);
        }

        .container-3 {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .container-4 {
            display: grid;
            grid-template-columns: 150px 2fr 5fr;
        }

        .container-5 {
            display: grid;
            grid-template-columns: 1fr 1fr minmax(100px, 1fr);
        }

        .container-6 {
            display: grid;
            grid-template-columns: 100px auto 100px;
        }

        /*网格线名称*/
        .container-7 {
            display: grid;
            grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
            grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
        }

        .container-8 {
            display: grid;
            grid-template-columns: 70% 30%;
        }

        .container-9 {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
        }

        /*.container-10 {*/
        /*display: grid;*/
        /*grid-template-columns: 1fr 1fr 1fr;*/
        /*grid-template-rows: 1fr 1fr 1fr;*/
        /*grid-row-gap: 20px; !*行间距*!*/
        /*grid-column-gap: 20px;!*列间距*!*/
        /*}*/

        /*.container-10 {*/
        /*display: grid;*/
        /*grid-template-columns: 1fr 1fr 1fr;*/
        /*grid-template-rows: 1fr 1fr 1fr;*/
        /*grid-gap: 20px 30px; !*行间距，列间距*!*/
        /*}*/

        /*.container-10 {*/
        /*display: grid;*/
        /*grid-template-columns: 1fr 1fr 1fr;*/
        /*grid-template-rows: 1fr 1fr 1fr;*/
        /*grid-gap: 20px 30px; !*行间距，列间距*!*/
        /*grid-template-areas: 'a b c'*/
        /*'d e f'*/
        /*'g h i';*/
        /*}*/

        /*.container-10 {*/
        /*display: grid;*/
        /*grid-template-columns: 1fr 1fr 1fr;*/
        /*grid-template-rows: 1fr 1fr 1fr;*/
        /*grid-gap: 20px 30px; !*行间距，列间距*!*/
        /*grid-template-areas: 'a a a'*/
        /*'b b b'*/
        /*'c c c';*/
        /*} */

        /*某些区域不需要利用的，则用点（.）表示*/
        .container-10 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-gap: 20px 30px; /*行间距，列间距*/
            grid-template-areas: 'a . c' 'd . f' 'g . i';
        }

        .container-11 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-auto-flow: column;
            /*划分网格后，容器的子元素会按照顺序，自动放置在每一个网格。
                        默认的顺序是“先行后列，即先填充满第一行，再开始放入第二行”*/
        }

        /*.container-12 {*/
        /*display: grid;*/
        /*grid-template-columns: 2fr 1fr 2fr;*/
        /*grid-template-rows: 1fr 1fr 1fr;*/
        /*justify-items: center;!*改属性设置单元格内容的水平位置（左中右）,*/
        /*start:对齐单元格的起始边缘，end:对齐单元格的结束边缘,center:单元格*/
        /*内部居中。stretch:拉伸，占满单元格的整个宽度（默认值）*!*/
        /*align-items: center;!*该属性设置单元格内容的垂直位置*!*/
        /*}*/

        .container-12 {
            display: grid;
            grid-template-columns: 2fr 1fr 2fr;
            grid-template-rows: 1fr 1fr 1fr;
            place-items: center end; /*该属性是justify-items和alignn-items的合并简写形式*/
        }

        .container-13 {
            display: grid;
            grid-template-columns: 100px 1fr 1fr;
            grid-template-rows: 100px 1fr 1fr;
            place-items: start start;
            /*justify-content: center;*/
            /*justify-content: start;*/
            place-content: space-around space-evenly;

        }

        .container-14 {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-rows: 200px;
        }

        .container-14 .item-8 {
            background-color: #d0e4a9;
            grid-row-start: 4;
            grid-column-start: 2;
        }

        .container-14 .item-9 {
            background-color: #d0e4a9;
            grid-row-start: 5;
            grid-column-start: 3;
        }

        .container-15 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        .container-15 .item-1 {
            grid-column-start: 2;
            grid-column-end: 4;
        }

        .container-16 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        .container-16 .item-1{
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 4;
        }

        .container-17 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 'h h h' 'm m m' 'f f f';
        }

        .container-17 .item-1 {
            grid-column-start: h-start;
            grid-column-end: h-end;
            grid-row-start: m-start;
            grid-row-end: f-end;
        }

        .container-18 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        .container-18 .item-1 {
            grid-column-end: span 2;/*span关键字表示跨越，左右边框之间跨越多少个网格*/
        }

        .container-18 .item-2 {
            grid-column: 1/3;/* grid-column-start和grid-column-end的简写*/
            grid-row: 2/4;/*grid-row-start和 grid-row-end的简写*/
        }

        .container-19 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 'a b c' 'd e f' 'g h i';
        }

        .container-19 .item-1{
            grid-area:e
        }

        .container-20 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        .container-20 .item-1{
            justify-self: start;
        }

        .container-20 .item-5{
            justify-self: center;
            align-self: center;
        }

        .container-20 .item-9{
            place-self:end end
        }

        .item {
            font-size: 4em;
            text-align: center;
            border: 1px solid #e5e4e9;
        }

        .item-1 {
            background-color: #ef342a;
        }

        .item-2 {
            background-color: #f68f26;
        }

        .item-3 {
            background-color: #4ba946;
        }

        .item-4 {
            background-color: #0376c2;
        }

        .item-5 {
            background-color: #c077af;
        }

        .item-6 {
            background-color: #f8d29d;
        }

        .item-7 {
            background-color: #b5a87f;
        }

        .item-8 {
            background-color: #d0e4a9;
        }

        .item-9 {
            background-color: #4dc7ec;
        }

        .item-10 {
            background-color: #803327;
        }

        .item-11 {
            background-color: #555555;
        }

        .item-12 {
            background-color: #2288ff;
        }
    </style>
</head>
<body style="text-align: center">
<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>
<br/>
<div class="container-1">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>
<br/>
<div class="container-2" style="width: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-3" style="width: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-4" style="width: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-5" style="width: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-6" style="width: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-7" style="width: 500px;height: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-8" style="width: 500px;height: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-9" style="height: 500px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
    <div class="item item-10">10</div>
    <div class="item item-11">11</div>
    <div class="item item-12">12</div>
</div>

<br/>
<div class="container-10" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-11" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-12" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-13" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-14" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-15" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-16" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-17" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-18" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-19" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

<br/>
<div class="container-20" style="width: 600px; height: 600px">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>
</body>
</html>